<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body><div id="app">
    <el-table
            :data="tableData"
            style="width: 100%"
            max-height="250"
            :default-sort = "{prop: 'date', order: 'descending'}"
            show-summary
    >
        <el-table-column
                fixed
                prop="date"
                label="日期"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="province"
                label="省份"
                width="120">
        </el-table-column>
        <el-table-column
                prop="city"
                label="市区"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="300">
        </el-table-column>
        <el-table-column
                prop="zip"
                label="邮编"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="120">
            <template slot-scope="scope">
                <el-button
                        @click.native.prevent="deleteRow(scope.$index, tableData)"
                        type="text"
                        size="small">
                    移除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
</body><!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',

        methods: {
            deleteRow(index, rows) {
                rows.splice(index, 1);
            }
        },
        data() {
            return {
                tableData: [{date: '2018-06-30',name: '小明',province: '广东',city: '湛江',address: '广东省湛江市霞山区XX路',zip: '524000',},{date: '2019-06-30',name: '小李',province: '上海',city: '普陀',address: '上海市普陀区金沙江路 1518 弄',zip: '200333',},{date: '2020-06-30',name: '小王',province: 'XX',city: 'XX',address: 'XX省XX市XXX区XX路',zip: '123456',},]
            }
        }


    })

</script>
</html>